<template>
	<view>
		<view class="search-box">
			<input class="uni-input search-input" placeholder="输入课程名称" v-model="searchVal" @input="search"/>
			<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
			<button class="mini-btn primary-btn" type="primary" @click="search">查询</button>
			<button class="mini-btn warn-btn" type="warn" @click="reset">重置</button>
		</view>
		<view>
			<view class="uni-container">
				<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据"
					@selection-change="selectionChange">
					<uni-tr class="header">
						<uni-th width="50" align="center">编号</uni-th>
						<uni-th width="80" align="center">课程名称</uni-th>
						<uni-th width="80" align="center">章节名称</uni-th>
						<uni-th width="80" align="center">设置</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableDataList" :key="index">
						<uni-td class="colcenter" align="center">
							
						{{ (pageCurrent - 1) * pageSize + index + 1 }}
						</uni-td>
						
						<uni-td>
							<view class="name">{{ item.courseName }}</view>
						</uni-td>
						<uni-td align="center">{{ item.resourceName }}</uni-td>
						<uni-td class="settings">
							<view class="uni-group">
								<button class="uni-button" size="mini" type="primary" @click="toRelease(item.courseId,item.resourceId)" v-if="!item.isRelease">发布</button>
								<button class="uni-button2" size="mini" type="default" @click="toRelease(item.courseId,item.resourceId)" :id="item.courseId" v-else>已发布</button>
								<button class="uni-button" size="mini" type="warn">删除</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
						@change="change" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		nextTick
	} from 'vue';
	// import tableData from './myindex.js';
	import {onShow} from '@dcloudio/uni-app'
	import apis from '../../api/apis.js';

	const searchVal = ref('');
	const tableDataList = ref([]);
	const pageSize = ref(10);
	const pageCurrent = ref(1);
	const total = ref(0);
	const loading = ref(false);
	const selectedIndexs = ref([]);
	const showClearIcon = computed(() => searchVal.value !== '');
	
	const toRelease = (id,resourceId)=>{
		// console.log(e)
		uni.navigateTo({
			url:'/pages/homeworkRelease/homeworkRelease?courseId=' + id + '&courseResourseId=' + resourceId
		})
	}
	// const getAllCourse = async()=>{
	// 	let res = await apis.getCourseAndChapter()
	// 	console.log(res)
	// }

	const selectedItems = () => {
		return selectedIndexs.value.map(i => tableDataList.value[i]);
	};

	const selectionChange = (e) => {
		selectedIndexs.value = e.detail.index;
	};

	const delTable = () => {
		console.log(selectedItems());
	};

	const change = (e) => {
		const table = ref(null);
		if (table.value && table.value.clearSelection) {
			table.value.clearSelection();
		}
		selectedIndexs.value.length = 0;
		getData(e.current);
	};

	const search = () => {
		getData(1, searchVal.value);
	};

	const reset = () => {
		searchVal.value = '';
		getData(1);
	};

	const clearIcon = () => {
		searchVal.value = '';
		reset();
	};

	const deleteItem = (index) => {
		tableDataList.value.splice(index, 1);
		total.value--;
		if (pageCurrent.value > 1 && tableDataList.value.length < pageSize.value) {
			pageCurrent.value--;
		}
		getData(pageCurrent.value);
	};

	const getData = async (currentPage, value = '') => {
		loading.value = true;
		pageCurrent.value = currentPage;
		let res = await apis.getCourseAndChapter()
		// console.log(res.data)
		let totalValue = res.data.length;
		let data = res.data.filter((item, index) => {
			const idx = index - (currentPage - 1) * pageSize.value;
			return idx < pageSize.value && idx >= 0;
		});
		if (value) {
			data = [];
			res.data.forEach(item => {
				if (item.courseName.indexOf(value) !== -1) {
					data.push(item);
				}
			});
			totalValue = data.length;
		}
		setTimeout(() => {
			tableDataList.value = data;
			total.value = totalValue;
			loading.value = false;
		}, 500);
	};

	onMounted(() => {	
		getData(1);
		// getAllCourse();
	});
</script>

<style lang="scss" scoped>
	.search-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80rpx;
		width: 95%;
		margin: 0 auto;
		background-color: #f5f5f5;
		border: 1px solid #888888;
		border-radius: 8rpx;
		padding: 0 10rpx;
	}

	.uni-container {
		text-align: center;
		
		// line-height: ;
		.header {
			text-align: center;
		}
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 44rpx;
		background-color: transparent;
	}

	.uni-icon {
		font-size: 36rpx;
		color: #999;
	}

	.mini-btn {
		font-size: 25rpx;
		margin-left: 5rpx;
	}

	.primary-btn {
		background-color: #007aff;
		color: #fff;
	}

	.warn-btn {
		background-color: #ff9500;
		color: #fff;
	}
	.settings{
		
	.uni-group {
		display: flex;
		flex-direction: column;
		// justify-content: space-around;
		align-items: center;
		.uni-button{
			width: 150rpx;
			margin-top: 10rpx;
			
		}
		.uni-button2{
			width: 150rpx;
			margin-top: 10rpx;
			color: #fff;
			background-color: limegreen;
		}
		// width: 90%;
	}
	}

</style>